<template>
  <div class="format-font">
    <Modal v-model="clusterActionModal" :closable="false" :footer-hide="true" :mask-closable="false" :title="action.title + '集群'" width="650">
      <el-form ref="form" :model="newClusterForm" label-width="130px">
        <el-form-item label="名称" prop="name" size="small">
          <el-input v-model="newClusterForm.name" placeholder="请输入集群名称" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description" size="small">
          <el-input v-model="newClusterForm.description" placeholder="请输入集群描述" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type" size="small" style="width: 400px">
          <el-select
            v-model="newClusterForm.type"
            size="mini"
            style="width: 400px"
            placeholder="请选择"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in clusterTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="username" size="small">
          <el-input v-model="newClusterForm.username" placeholder="请输入集群管理账户" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" size="small">
          <el-input v-model="newClusterForm.password" placeholder="请输入集群管理密码" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="VIP" prop="vip" size="small">
          <el-input v-model="newClusterForm.vip" placeholder="请输入VIP" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="端口" prop="port" size="small">
          <el-input-number v-model="newClusterForm.port" placeholder="请输入端口" style="width: 400px"></el-input-number>
        </el-form-item>
        <el-form-item label="Charset" prop="Charset" size="small">
          <el-input v-model="newClusterForm.Charset" placeholder="请输入Charset" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="默认数据库" prop="defaultDatabase" size="small">
          <el-input v-model="newClusterForm.defaultDatabase" placeholder="请输入默认数据库" style="width: 400px"></el-input>
        </el-form-item>

        <el-form-item label="备注信息" prop="comment" size="small">
          <el-input v-model="newClusterForm.comment" placeholder="请输入备注信息" style="width: 400px" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="ok('form')">{{ action.title }}集群信息</el-button>
          <el-button size="small" @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </Modal>
  </div>
</template>

<script>
import { snakeCaseObject } from '@/libs/object'
import { createRdsCluster, updateRdsCluster } from '@/api/rds/cluster'
import { errorNotify } from '@/libs/util'

export default {
  name: 'ClusterAction',
  props: {
    clusterActionModal: {
      type: Boolean,
      default: false,
      require: true
    },
    clusterInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: Object,
      default() {
        return {
          source: 'basic',
          title: '修改',
          type: 'update'
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      ClusterForm: {},
      newClusterForm: {},
      clusterTypeChoice: [
        {
          value: 'oracle',
          lable: 'oracle'
        },
        {
          value: 'mysql',
          lable: 'mysql'
        }
      ]
    }
  },
  mounted() {
    this.setInitModelInfo()
  },
  methods: {
    cancel() {
      this.$emit('on-cluster-change', { type: 'cancel', status: false })
    },
    ok(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.actionClusterInfo()
        } else {
          return false
        }
      })
    },
    async actionClusterInfo() {
      const params = this.newClusterForm
      try {
        if (this.action.type === 'update') {
          const { data } = await updateRdsCluster(this.newClusterForm.id, snakeCaseObject(params))
          this.$emit('on-cluster-change', { type: this.action.type, status: false, clusterId: data.id })
        } else if (this.action.type === 'create') {
          const { data } = await createRdsCluster(snakeCaseObject(this.newClusterForm))
          this.$emit('on-cluster-change', { type: this.action.type, status: false, clusterId: data.id })
        } else {
          return false
        }
      } catch (e) {
        errorNotify(e)
      }
    },
    setInitModelInfo() {
      this.newClusterForm = this.$lodash.cloneDeep(this.clusterInfo)
    }
  }
}
</script>

<style scoped>
</style>
